<!--
 * @description: 气泡弹窗，有待修改，位置偏移了
 * @Author: FengKongLi
 * @Date: 2022-07-26 09:50:46
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-07-29 17:24:34
-->
<template>
  <div class="popup">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import { Popup, PopupTwo } from "../utils/popup.js";

export default {
  name: "Popup",
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NTRlZTllYi0zMjQ3LTRjYzItOGViOS1kYmVjNjAyOTA5ODEiLCJpZCI6OTk0NTAsImlhdCI6MTY1NjQ5NTE4Nn0.BeOLKnxflcj0ztuG4RYdvR8xbXGV7cfEZQWq8Hu7Epw";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        // fullscreenButton: false, //全屏按钮
        // sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        shouldAnimate: true,
        // infoBox: true,
      });
      this.handleClick(viewer);
    },
    handleClick(viewer) {
      // new Cesium.ScreenSpaceEventHandler(element)处理用户输入事件。可以添加自定义功能以在用户输入时执行。
      let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // setInputAction(action, type, modifier)设置要在输入事件上执行的功能。
      // action回调函数；type事件类型；modifier 键盘事件修饰符 可选
      handler.setInputAction(function (click) {
        // 这里使用了发生在屏幕上单个位置事件的回调函数；Cesium.ScreenSpaceEventHandler.PositionedEvent发生在屏幕上单个位置的事件。
        console.log("左键已点击");
        // pick()返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，如果该位置没有任何内容，则返回未定义的对象。
        // let pick = viewer.scene.pick(click.position);
        // new Cesium.Cartesian2(x, y)二维笛卡尔点
        // let point = new Cesium.Cartesian2(click.position.x, click.position.y);
        // if (Cesium.defined(pick) && pick.id.id === "id") {
        //   let properties = {};
        //   let name = picj.id.name;
        //   for (let key in pick.id.properties._propertyNames) {
        //     let title = pick.id.properties._propertyNames[key];
        //     let value = pick.id.properties[title]._value;
        //     properties[title] = value;
        //   }
        //   let ray = viewer.camera.getPickRay(point);
        //   let popup = new Popup({
        //     name: name,
        //     viewer: viewer,
        //     properties: properties,
        //     geometry: viewer.scene.globe.pick(ray, viewer.scene),
        //   });
        // }
        // -------------
        let point = new Cesium.Cartesian2(click.position.x, click.position.y);
        if (point) {
          // 获取点击位置的坐标
          let ray = viewer.camera.getPickRay(point);
          let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
          if (cartesian) {
            let popup = new PopupTwo({
              viewer: viewer,
              geometry: cartesian,
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  },
};
</script>
<style lang="scss">
#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0px;
  overflow: hidden;
}

.bx-popup-ctn {
  position: absolute;
  z-index: 999;
  background: #fff;
}
.bx-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}
.bx-popup-tip {
  width: 17px;
  background: #fff;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.bx-popup-header-ctn {
  background: #090302;
  color: #fff;
  font-size: 15px;
  padding: 4px;
}
.bx-popup-content-ctn {
  padding: 15px;
}
.leaflet-popup-close-button {
  user-select: auto;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  cursor: pointer;
}
</style>
